import React from 'react'
import {
    Text,
    TouchableOpacity,
    View,
    DrawerLayoutAndroid,
    ScrollView,
    BackHandler,
} from "react-native";
import Style from "../../common/style";

import Title from "../component/title";

export default class DrawerLayoutPage extends React.Component {

    state={
        isOpen:false,
    };

    componentDidMount() {
        this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
            if (this.state.isOpen && this.drawerLayout) {
                this.drawerLayout.closeDrawer();
                return true;
            }
            return false;
        })
    }

    openDrawerLayout(){
        if (this.drawerLayout) {
            this.drawerLayout.openDrawer();
        }
    }

    componentWillUnmount() {
        this.backHandler.remove()
    }

    render() {

        const navigationView = (
            <View>
                <Title title='Menu'/>
                <ScrollView style={{paddingLeft:15,paddingRight:15}}>
                    <Text>in DrawerLayout</Text>
                </ScrollView>
            </View>
        );

        return (
            <DrawerLayoutAndroid ref={(ref)=>this.drawerLayout=ref}
                drawerWidth={250}
                drawerPosition={DrawerLayoutAndroid.positions.Right}
                renderNavigationView={() => navigationView}
                onDrawerOpen={()=>this.setState({isOpen:true})}
                onDrawerClose={()=>this.setState({isOpen:false})}>
                <View>
                    <Title title='DrawerLayout'/>
                    <ScrollView style={{paddingLeft:15,paddingRight:15}}>
                        <Text>in children</Text>

                        <TouchableOpacity style={Style.button} onPress={()=>{
                            this.openDrawerLayout()
                        }}>
                            <Text>打开侧边栏</Text>
                        </TouchableOpacity>
                    </ScrollView>
                </View>
            </DrawerLayoutAndroid>
        )
    }

}
